<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>通知公告</title> 
    <link href="${ctx }/css/base.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx }/custom/uimaker/easyui.css">
    <link href="${ctx }/css/process.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctx }/custom/uimaker/icon.css">
    <link href="${ctx }/js/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
</head> 
<body>
	<div class="easyui-tabs1" data-options="fit:true">
      <div title="基本信息" data-options="closable:false" class="basic-info">
      	<table class="kv-table">
			<tbody>
				<tr>
					<td class="kv-label">姓名</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">性别</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">出生日期</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">其他信息01</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">其他信息02</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">其他信息03</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">其他信息04</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">其他信息05</td>
					<td colspan="3" class="kv-content">
						<input class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:250px">
					</td>
				</tr>
				<tr>
					<td class="kv-label">&nbsp;</td>
					<td colspan="3" class="kv-content">
						<div class="opt-buttons" style="float:left;margin-top: 10px">
							<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-list'" onclick="">保存修改</a>
						</div>	
					</td>
				</tr>
			</tbody>
		</table>
      	
      </div>
      <div title="头像修改" data-options="closable:false">
     	  <p style="margin: 10px ;font-size: 15px;font-weight: bold;">自定义头像:</p>
     	  <form id="photoForm" enctype="multipart/form-data">
     	  <table>
     	  	<tr>
     	  		<td width="40%" align="center">
     	  			<div id="dp1" style="width: 150px;
     	  			border: 1px solid #000;
     	  			height: 150px;margin: 20px 40px;
     	  			text-align: center;border-radius: 5px;">
     	  				<img style="width: 145px;height: 145px"
     	  				 title="用户头像" src="${ctx}/sys/showPhoto">
     	  			</div>
     	  		</td>
     	  		<td rowspan="3" style="border-left: 1px solid #000;"></td>
     	  	</tr>
     	  	<tr>
     	  		<td align="center">
     	  			<input type="file" disabled name="photo" id="photo" style="display: none;" accept="image/*">
     	  			<input type="hidden" name="photoName">
     	  			<a href="#" class="easyui-linkbutton" 
     	  			data-options="iconCls:'icon-search'" 
     	  			onclick="btnClick();" style="margin-left:60px">选择头像</a>
     	  		</td>
     	  	</tr>
     	  	<tr>
     	  		<td>
     	  			<div id="d01" style="margin: 20px 40px">
     	  			<p style="margin-left: -30px ;margin-bottom:20px; font-size: 15px;font-weight: bold;">系统头像:</p>
						<span>
							<img src="${ctx}/images/photo/000.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px;cursor: pointer;"/>&nbsp;
						</span>
						<span>
							<img src="${ctx}/images/photo/001.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<span>
							<img src="${ctx}/images/photo/001.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<br/>
						<span>
							<img src="${ctx}/images/photo/002.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<span>
							<img src="${ctx}/images/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						
						<span>
							<img src="${ctx}/images/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<br/>
						<span>
							<img src="${ctx}/images/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<span>
							<img src="${ctx}/images/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
						<span>
							<img src="${ctx}/images/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;padding-right: 5px"/>&nbsp;
						</span>
					</div>
     	  		</td>
     	  	</tr>
     	  	<tr>
     	  		<td align="center" colspan="2">
     	  			<a href="#" class="easyui-linkbutton" 
     	  			data-options="iconCls:'icon-save'" 
     	  			onclick="savePhoto()" style="margin-left:200px;margin-top: 10px">保存头像</a>
     	  		</td>
     	  	</tr>
     	  </table>
     	  </form>
	  </div>
   
</body> 
</html>
    <script type="text/javascript" src="${ctx }/custom/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx }/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${ctx }/js/jquery-form.js"></script>
<script type="text/javascript">
	$('.easyui-tabs1').tabs({
      tabHeight: 36
    });
	$(function(){
		$('#photo').change(function(e){
			$('#photo').attr("disabled",false);
			var file = e.target.files[0];
			photo(file);
		});
		
		$('#d01 span img').click(function(){
			var src = $(this).attr('src');
			$('#dp1 img').attr("src",src);
			$('input[name="photoName"]').val(src);
		});
	});
	function btnClick(){
		$('#photo').attr("disabled",false);
		$('#photo').trigger('click');
	}
	function photo(file){
		//声明图片对象
		var img = new Image();
		//从文件里获取图片路径
		var path = URL.createObjectURL(file);
		img.src = path;
		img.id = "p01";
		img.width = 145;
		img.height = 145;
		img.onload = function(){
			URL.revokeObjectURL(path);
			$('#dp1').empty().html(img);
		}
	}
	function savePhoto(){
		var f = $('#photoForm');
		var option = {
			type:'post',
			url:'${ctx}/user/savePhoto',
			headers:{"ClientCallMode":"ajax"},
			dataType:'json',
			success:function(r){
				alert(r.msg);
			}
		};
		f.ajaxSubmit(option);
	}
</script>











